<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ManagerReceiver</title>
    <link rel="stylesheet" type="text/css" href="../css/login.css">
</head>
<body>
<div id="app" style="width: 100%;text-align: center">
    <div style="margin: 10px auto">
        <label>
            <input type="text" v-model="newName" style="margin: 10px auto">
        </label>
        <br>
        <button @click="addReceiver">添加receiver</button>
    </div>
    <div style="margin: 10px auto">
        <label>
            <input type="text" v-model="id" style="margin: 10px auto"><br>
            <input type="text" v-model="newName2" style="margin: 10px auto">
        </label>
        <br>
        <button @click="modifyReceiver">修改receiver</button>
    </div>
    <div style="margin: 10px auto">
        <table style="margin: 10px auto">
            <thead>
            <tr>
                <td>ID号码</td>
                <td>姓名</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(r,index) in receivers">
                <td>{{r.receiverId}}</td>
                <td>{{r.name}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="../js/Vue.js"></script>
<script>
  const app = Vue.createApp({
      data(){
          return {
              receivers:[],
              newName:"",
              id:"",
              newName2:""
          }
      },
      methods:{
          addReceiver(){
              if(this.newName){
                  const xhr = new XMLHttpRequest();
                  xhr.open("GET", "http://localhost:8080/AddReceiverServlet?name="+this.newName);
                  xhr.send();
                  xhr.onreadystatechange = function () {
                      if (xhr.readyState === 4) {
                          if (xhr.status >= 200 && xhr.status < 300) {
                              if(xhr.response === "true"){
                                  console.log("增加成功");
                              }
                              else{
                                  console.log("增加失败");
                              }
                          } else {
                              console.log("出现错误");
                          }
                      }
                  }
                  const xhr2 = new XMLHttpRequest();
                  xhr2.open("GET", "http://localhost:8080/GetAllReceiverServlet");
                  xhr2.send();
                  xhr2.onreadystatechange = function () {
                      if (xhr2.readyState === 4) {
                          if (xhr2.status >= 200 && xhr2.status < 300) {
                              this.receivers = JSON.parse(xhr2.response);
                          } else {
                              console.log("出现错误");
                          }
                      }
                  }
              }
          },
          modifyReceiver(){
              if(this.newName2&&this.id){
                  const xhr = new XMLHttpRequest();
                  xhr.open("GET", "http://localhost:8080/ModifyReceiverServlet?id="+this.id+"&name="+this.newName2);
                  xhr.send();
                  xhr.onreadystatechange = function () {
                      if (xhr.readyState === 4) {
                          if (xhr.status >= 200 && xhr.status < 300) {
                              if(xhr.response === "true"){
                                  console.log("增加成功");
                              }
                              else{
                                  console.log("增加失败");
                              }
                          } else {
                              console.log("出现错误");
                          }
                      }
                  }
              }
          }
      },
      created(){
          const xhr = new XMLHttpRequest();
          xhr.open("GET", "http://localhost:8080/GetAllReceiverServlet");
          xhr.send();
          xhr.onreadystatechange = function () {
              if (xhr.readyState === 4) {
                  if (xhr.status >= 200 && xhr.status < 300) {
                      this.receivers = JSON.parse(xhr.response);
                  } else {
                      console.log("出现错误");
                  }
              }
          }
      }
  });
  app.mount("#app");
</script>
</body>
</html>